<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/page.css">
    <script src="js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .searchBox {
            overflow: hidden;
            width: 1280px;
            margin: 0 auto;
        }

        .searchBox .left {
            float: left;
        }

        .searchBox .right {
            float: right;
        }

        .searchBox .right>* {
            float: left;
            margin-left: 30px;
        }

        .wrap {
            width: 1200px;
            margin: 50px auto;
        }

        .wrap ul {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-evenly; */
            overflow: hidden;
        }

        .wrap ul>li>a {
            width: 280px;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 10px;
            padding: 5px;
        }

        .wrap ul>li>a>img {
            width: 100%;
        }

        .header {
            height: 100px;
            background-color: #6ff;
        }

        .pageBox1 {
            width: 1280px;
            margin: 50px auto;
            min-height: 40px;
            background-color: gray;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="searchBox">
        <div class="left">
            <input class="searchCon" type="text">
            <button class="searchBtn">查询</button>
        </div>
        <div class="right">
            <select name="" id="selectNum">
                <option value="4" selected>每页显示4条</option>
                <option value="8">每页显示8条</option>
                <option value="12">每页显示12条</option>
            </select>
            <p>
                排序类型:
                编号：<input type="radio" name="orderType" checked value="id" id="">|
                名称：<input type="radio" name="orderType" value="goods_title" id="">|
                价格：<input type="radio" name="orderType" value="goods_current_price" id="">|
            </p>
            <p>
                排序方式:
                升序：<input type="radio" name="order" checked value="asc" id="">
                降序：<input type="radio" name="order" value="desc" id="">
            </p>
        </div>
    </div>
    <div class="wrap">
        <ul class="box">
            <!-- <li>
                <img src="http://gw.alicdn.com/bao/uploaded/i2/72458074/TB2oYdsedXnpuFjSZFoXXXLcpXa_!!72458074.jpg"
                    alt="">
                <div>
                    <p>【移不动】Capcom CFB 怪物猎人 泡狐龙 手办 散货</p>
                    <p><span>600.00</span> <i>100</i></p>
                </div>

            </li> -->
        </ul>

    </div>
    <div class="pageBox1">
        <div class="page">

        </div>
    </div>
    <div class="footer"></div>
</body>
<script src="js/page.js"></script>
<script src="js/goodsList.js"></script>
<!-- <script src="js/ajax.js"></script> -->
<script>
    window.onload = function () { // 你加载你的
        // 设置默认值
        var con = ""; // searchCon 里面的内容
        var showNum = 4;
        var orderType = "id";
        var type = "asc";

        update(con, orderType, type, showNum);
        $(".searchBtn").click(function () {
            con = $(".searchCon").val();
            update(con, orderType, type, showNum)
            // console.log(con);
        })

        // 只有 Jquery 对象才可以使用 jq的方法
        $("#selectNum").change(function () {
            // console.log(this);
            // showNum = this.value;  //原生dom 的属性
            showNum = $(this).val()   //jq对象的方法
            console.log($(this).val());
            update(con, orderType, type, showNum)
        })

        $("input[type=radio][name=orderType]").click(function () {
            orderType = $(this).val();
            console.log(orderType);
            update(con, orderType, type, showNum)
        })

        $("input[type=radio][name=order]").click(function () {
            type = $(this).val();
            console.log(type);
            update(con, orderType, type, showNum)
        })

        function update(con, orderType, type, showNum) {

            goodsList.getCount(con, orderType, type).then(res => {
                console.log(res);

                new Page(".page", {
                    count: res.count,
                    showNum: showNum,
                    showPage: 5,
                    callback: function (index) {
                        console.log(index);

                        goodsList.getData(con, orderType, type, index, showNum).then(data => {
                            console.log(data);
                            var html = "";
                            data.forEach(item => {

                                var { goods_id, goods_pic, goods_price, goods_title, goods_trade_num } = item;

                                html += `
                                        <li productId="${goods_id}">
                                        <a href="goodsDetail.html?goodsId=${goods_id}">
                                                <img src="http:${goods_pic}"
                                                alt="">
                                                <div>
                                                    <p>${goods_title}</p>
                                                    <p><span>${goods_price}</span> <i>${goods_trade_num}</i></p>
                                                </div>
                                            </a>
                                        </li>
                                        `
                            })

                            $(".box").html(html);

                        })
                    }
                })

            })
        }




        // $.ajax({
        //     type: "get",
        //     url: "http://localhost/1904_php/6-11/php/count.php",
        //     data: {
        //         con,
        //         orderType,
        //         type
        //     },
        //     dataType: "json",
        //     success: function (data) {  //success  注意不是 callback
        //         console.log(data);

        //         new Page(".page", {
        //             count: data.count,
        //             showNum: showNum,
        //             showPage: 5,
        //             callback: function (index) {
        //                 console.log(index);
        //                 // ?con=&orderType=id&type=asc&pageIndex=1&showNum=5
        //                 $.ajax({
        //                     type: "get",
        //                     url: "http://localhost/1904_php/6-11/php/getData.php",
        //                     data: {
        //                         con,
        //                         orderType,
        //                         type,
        //                         pageIndex: index,
        //                         showNum,
        //                     },
        //                     dataType: "json",
        //                     success: function (data) {
        //                         console.log(data);

        //                         var html = "";
        // data.forEach(item => {

        //     var { goods_id, goods_pic, goods_price, goods_title, goods_trade_num } = item;

        //     html += `
        //         <li productId="${goods_id}">
        //         <a href="goodsDetail.html?goodsId=${goods_id}">
        //                 <img src="http:${goods_pic}"
        //                 alt="">
        //                 <div>
        //                     <p>${goods_title}</p>
        //                     <p><span>${goods_price}</span> <i>${goods_trade_num}</i></p>
        //                 </div>
        //             </a>
        //         </li>
        //         `
        // })

        // $(".box").html(html);


        //                     }
        //                 })



        //             }
        //         })


        //     }
        // })






        // var box = document.querySelector(".box");



        // $.ajax({
        //     type: "get",
        //     url: "http://localhost/1904_php/6-11/php/goodsList.php",
        //     dataType: "json",
        //     callback: function (data) {
        //         console.log(data);
        //         var html = "";
        //         data.forEach(item => {

        //             /* goods_id: "a001"
        //             goods_pic: "//gw.alicdn.com/bao/uploaded/i2/72458074/TB2oYdsedXnpuFjSZFoXXXLcpXa_!!72458074.jpg"
        //             goods_price: "380"
        //             goods_sub_pic: (3) ,
        //             goods_title: "【移不动】Capcom CFB 怪物猎人 泡狐龙 手办 散货"
        //             goods_trade_num: "267"
        //             type: null */

        //             var { goods_id, goods_pic, goods_price, goods_title, goods_trade_num } = item;

        //             html += `
        //             <li productId="${goods_id}">
        //                <a href="goodsDetail.html?goodsId=${goods_id}">
        //                      <img src="http:${goods_pic}"
        //                     alt="">
        //                     <div>
        //                         <p>${goods_title}</p>
        //                         <p><span>${goods_price}</span> <i>${goods_trade_num}</i></p>
        //                     </div>
        //                 </a>
        //             </li>
        //             `
        //         })
        //         box.innerHTML = html;



        //     }

        // })





    }


</script>

</html>